<template>
  <el-dialog
    title="试题预览"
    append-to-body
    :visible="value"
    @close="$emit('input', false)"
    class="dialog"
    width="65%"
  >
    <el-divider>基本信息</el-divider>
    <el-row class="question-row">
      <el-col :span="10"><b>试题编号:</b>{{ question.quest_num }}</el-col>
      <el-col :span="4"><b>试题类型:</b>{{ question.quest_type }} </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="10"
        ><b>标签信息:</b>
        <span v-for="item in question.tag_info" :key="item"
          >{{ item }}&nbsp;</span
        >
      </el-col>
      <el-col :span="4"
        ><b>发布状态:</b>
        <el-tag size="small" v-if="question.show_state == 1" type="success"
          >上架</el-tag
        >
        <el-tag size="small" v-if="question.show_state == 2" type="info"
          >下架</el-tag
        >
      </el-col>
      <el-col :span="5"
        ><b>审核人:</b>{{ question.check_username || "暂无" }}
      </el-col>
      <el-col :span="5"
        ><b>审核状态:</b>
        <el-tag size="small" v-if="question.check_state == 1" type="warning"
          >待审核</el-tag
        >
        <el-tag size="small" v-if="question.check_state == 2" type="success"
          >通过</el-tag
        >
        <el-tag size="small" v-if="question.check_state == 3" type="info"
          >不通过</el-tag
        >
      </el-col>
      <el-col :span="10"
        ><b>审核意见:</b>
        {{ question.check_remarks || "暂无" }}
      </el-col>
      <el-col :span="4"><b>创建人:</b>{{ question.create_name }}</el-col>
      <el-col :span="5"
        ><b>难度系数:</b>
        <span v-if="question.difficulty == 1">简单</span>
        <span v-if="question.difficulty == 2">中等</span>
        <span v-if="question.difficulty == 3">较难</span>
      </el-col>
      <el-col :span="5"><b>发布时间:</b>{{ question.created_at }} </el-col>
    </el-row>
    <el-divider>试题信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>题干信息：</b>
        <el-link :underline="false" type="primary">
          <div v-html="question.question"></div>
        </el-link>
      </el-col>
      <el-col class="flex">
        <b>选项信息：</b>
        <!-- 单选/多选/判断 -->
        <div v-if="question.quest_type != 4">
          <el-checkbox
            v-for="(item, index) in toParse(question.quest_options)"
            :checked="item.is_true"
            :key="index"
          >
            {{ item.code }} {{ item.content }}
          </el-checkbox>
        </div>
        <!-- 简答 -->
        <div
          v-html="question.quest_answer"
          v-if="question.quest_type == 4"
        ></div>
      </el-col>
    </el-row>
    <el-divider>答案信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>正确答案：</b>
        <el-link :underline="false" type="primary">
          <div v-html="question.quest_answer"></div>
        </el-link>
      </el-col>
    </el-row>
    <el-row class="question-row">
      <el-col class="flex">
        <b>答案解析：</b>
        <div v-html="question.quest_remark"></div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "QuestionPreview",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    question: {
      type: Object,
      require: true,
    },
  },
  methods: {
    toParse(val) {
      if (!val) return [];
      return JSON.parse(val);
    },
  },
};
</script>

<style scoped lang="scss">
.question-row {
  line-height: 30px;
}
.question-row b {
  color: #999;
  font-weight: normal;
  margin-right: 5px;
}
.question-row .flex {
  display: flex;
}
.question-row .flex b {
  width: 72px;
}
.dialog {
  .el-dialog__body {
    padding-top: 5px;
  }
}
</style>
